<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		<style type="text/css">
			/*引导页样式*/
			.mui-slider-indicator .mui-indicator{border-radius: 6px; background: #eee; }
			.mui-slider-indicator .mui-active.mui-indicator {background: #EF3743; width: 12px; box-shadow: none; }
			.mui-slider-indicator .mui-indicator{ box-shadow: none;}
			.start {position: absolute; bottom: -50px; width: 60%; left: 20%; right: 20%; height: 40px; line-height: 38px; border-radius: 20px; padding: 0; font-weight: bold; }
			.mui-btn-danger:enabled:active{ box-shadow: none;}
			.mui-btn-danger, .mui-btn-negative, .mui-btn-red{border: 0px solid #dd524d; background-color: rgb(240, 55, 68); box-shadow: 0 5px 30px rgba(240,55,68,.4); }
			#close {position: absolute; width: 160px; left: 50%; margin-left: -80px; bottom: 15%; padding: 10px; color: #fff; border-color: #fff; }
			.item-logo {width: 100%; height: 100%; position: relative; background-color: #fff; }
			.item-logo a {width: 300px; height: 300px; display: block; border: 1px solid #FFFFFF; border-color: rgba(255, 255, 255, 0.5); text-align: center; line-height: 300px; border-radius: 50%; font-size: 40px; color: #fff; position: absolute; top: 10%; left: 50%; margin-left: -150px; }
			.animate {position: absolute; left: 0; top: 60%; width: 100%; color: #000; display: -moz-box; }
			.animate h2 {text-align: center; margin-bottom: 30px; }
			.animate li {height: 30px; line-height: 30px; list-style: none; font-size: 16px; text-align: center; }
			.animate li:nth-child(3) {text-align: left; float: right; }
			.h2-red{ color: #EF3743;}
			.animated {-webkit-animation-duration: .4s; -webkit-animation-play-state: paused; -webkit-animation-fill-mode: both; }
			.guide-show .bounceInDown {-webkit-animation-name: bounceInDown; -webkit-animation-play-state: running; -webkit-animation-delay: 0s; display: block; }
			.guide-show .bounceInUp {-webkit-animation-name: bounceInUp; -webkit-animation-play-state: running; -webkit-animation-delay: .5s; display: block; }
			.guide-show .fadeIn {-webkit-animation-name: fadeIn; -webkit-animation-play-state: running; -webkit-animation-delay: .5s; }
			#goProtocol{ font-size: 12px; color: #999; display: block; text-align: center; text-decoration: underline; position: absolute; left: 0; right: 0; bottom: -90px;}
			#jump{ font-size: 12px; font-family: -apple-system, "PingFang SC","Helvetica Neue", Helvetica, STHeiTi, sans-serif; color: #777; background: #ECECEC; display: inline-block; width:36px; height: 36px; text-align: center; line-height: 36px; border-radius: 50%; position: absolute; right: 20px; top: 20px;}
			@-webkit-keyframes fadeIn {
			  from {
				opacity: 0;
			  }

			  to {
				opacity: 1;
			  }
			}
			@-webkit-keyframes bounceInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -50px, 0);
					transform: translate3d(0, -50px, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -5px, 0);
					transform: translate3d(0, -5px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 3px, 0);
					transform: translate3d(0, 3px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@-webkit-keyframes bounceInUp {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000);
					transition-timing-function: cubic-bezier(0.215, .610, .355, 1.000)
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, 50px, 0);
					transform: translate3d(0, 50px, 0)
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, -25px, 0);
					transform: translate3d(0, -25px, 0)
				}
				75% {
					-webkit-transform: translate3d(0, 10px, 0);
					transform: translate3d(0, 10px, 0)
				}
				90% {
					-webkit-transform: translate3d(0, -5px, 0);
					transform: translate3d(0, -5px, 0)
				}
				100% {
					-webkit-transform: none;
					transform: none
				}
			}
		</style>
	</head>
	<body>
		<div id="slider" class="mui-slider mui-fullscreen">
			<div class="mui-slider-group">
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<div class="item-logo">
						<a href="#"><img src="images/guide_pic1.png"/></a>
						<div class="animate guide-show">
							<h2 class="animated bounceInDown"><span class="h2-red">精品课堂</span>直播互动</h2>
							<li class="animated bounceInUp">资深名师在线答疑</li>
						</div>
					</div>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<div class="item-logo">
						<a href="#"><img src="images/guide_pic2.png"/></a>
						<div id="tips-2" class="animate mui-hidden">
							<h2 class="animated bounceInDown"><span class="h2-red">热门资讯</span>原创文章</h2>
							<li class="animated bounceInUp">报考信息实时更新</li>
						</div>
					</div>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item">
					<div class="item-logo">
						<a href="#"><img src="images/guide_pic3.png"/></a>
						<div id="tips-3" class="animate mui-hidden">
							<h2 class="animated bounceInDown"><span class="h2-red">备考刷题</span>高效学习</h2>
							<li class="animated bounceInUp">海量真题优质解析</li>
						</div>
					</div>
				</div>
				<!-- 第四张 -->
				<div class="mui-slider-item">
					<div class="item-logo">
						<a href="#"><img src="images/guide_pic4.png"/></a>
						<div id="tips-4" class="animate mui-hidden">
							<h2 class="animated bounceInDown"><span class="h2-red">书海无涯</span>乐读新知</h2>
							<li class="animated bounceInDown">优质好书助力遴选</li>
							<li><button class="mui-btn mui-btn-danger start animated bounceInUp" type="button">开始体验</button></li>
							<p id="goProtocol" class=" animated fadeIn">进入即同意用户协议</p>
						</div>
					</div>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
			<!-- <a href="javascript:;" id="jump">跳过</a> -->
		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/public.js"></script>
		<script src="js/updateApp.js"></script>
		<script type="text/javascript">
			mui.init();

			mui.plusReady(function() {
                checkNetworkStatus();

				//设置全屏显示
                plus.navigator.setFullscreen(true);
				//手动关闭APP启动画面
				plus.navigator.closeSplashscreen();

			});
			
			//点击按钮，进入主界面
            mui(".mui-slider").on('tap','.start ,#jump',function(){
                //向本地存储中设置launchFlag的值，即启动标识；
                plus.storage.setItem("launchFlag",'true');
                //设置全屏显示为false
                plus.navigator.setFullscreen(false);
                //关闭当前webview
                plus.webview.currentWebview().close();

                //检查更新
				ApplicationUpdateTool();
            })
            
            //图片切换时，触发动画
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
			 	//注意slideNumber是从0开始的；
			 	var index = event.detail.slideNumber+1;
			 	if(index==2||index==3||index==4){
			 		var item = document.getElementById("tips-"+index);
			 		if(item.classList.contains("mui-hidden")){
			 			item.classList.remove("mui-hidden");
			 			item.classList.add("guide-show");
			 		}
			 	}
			});
			
			document.getElementById('goProtocol').addEventListener('tap',function(){
				mui.openWindow({
					url: './src/templates/member/protocol.html',
				    createNew:false,
				    show: {
				        autoShow: true,
				        aniShow: 'pop-in',
					        duration: 400
				    },
				    waiting: {
				        autoShow: false,
				    }
				})
			});
		</script>
	</body>

</html>